<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Slideshow Viewer</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/vargas/jquery.vegas.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.vegas.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jqueryCycle/jquery.cycle.all.min.js"></script>

    <script type="text/javascript">
      $(function(){
        /*
        $.vegas('overlay', {
          src:'includes/css/template/vargas/overlays/07.png'
        });

        $.vegas('slideshow', { backgrounds : [
            {src:'images/template/photoAlbumViewer/DSCN0171.JPG'},
            {src:'images/template/photoAlbumViewer/DSCN0177.JPG'},
            {src:'images/template/photoAlbumViewer/DSCN0178.JPG'},
            {src:'images/template/photoAlbumViewer/DSCN0179.JPG'}
          ]
        }
      );
        */
      $('#slideshow').cycle({
          fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
          before : function(currSlideElement, nextSlideElement, options) {
            $("#slideshowCaptionText").text($(nextSlideElement).attr("alt"));
          }
        });

        
      });
    </script>

    <style type="text/css">

    </style>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "slideshowViewer";
  ?>

  <body>

    <!-- Container -->
    <div id="container">
      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>
      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Slideshow Viewer</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content" >

          <div class="sectionLeft">

            <h1>Slideshow Viewer</h1>

            <div id="slideshow" >
              <img src="images/template/photoAlbumViewer/DSCN0163.JPG" title="This is the caption for image 1" alt="This is the caption for image 1" />
              <img src="images/template/photoAlbumViewer/DSCN0171.JPG"  title="This is the caption for image 2" alt="This is the caption for image 2"/>
              <img src="images/template/photoAlbumViewer/DSCN0173.JPG"  title="This is the caption for image 3" alt="This is the caption for image 3"/>
              <img src="images/template/photoAlbumViewer/DSCN0174.JPG"  title="This is the caption for image 4" alt="This is the caption for image 4"/>
              <img src="images/template/photoAlbumViewer/DSCN0175.JPG"  title="This is the caption for image 5" alt="This is the caption for image 5"/>
              <img src="images/template/photoAlbumViewer/DSCN0176.JPG"  title="This is the caption for image 6" alt="This is the caption for image 6"/>
              <img src="images/template/photoAlbumViewer/DSCN0177.JPG"  title="This is the caption for image 7" alt="This is the caption for image 7"/>
              <img src="images/template/photoAlbumViewer/DSCN0178.JPG"  title="This is the caption for image 8" alt="This is the caption for image 8"/>
              <img src="images/template/photoAlbumViewer/DSCN0179.JPG"  title="This is the caption for image 9" alt="This is the caption for image 9"/>
              <img src="images/template/photoAlbumViewer/DSCN0180.JPG"  title="This is the caption for image 10" alt="This is the caption for image 10"/>
              <img src="images/template/photoAlbumViewer/DSCN0181.JPG" title="This is the caption for image 11" alt="This is the caption for image 11"/>              
            </div>
            <div id="slideshowCaption"><p id="slideshowCaptionText"></p></div>


            <!--   end #section-->
          </div>

          <!-- Right Navigation -->
          <div id="sidebar">
            <?php include('includes/rightNavSamples.php') ?>
          </div>
          <!-- end Right Navigation -->
        

          <!-- end #content -->
        </div>
        
        </div>
        <!-- end #bodyContent -->
        <!-- End Body -->

        <!-- Footer -->
        <div id="footer">
          <?php include('includes/footer.php') ?>
        </div>
        <!-- End Footer -->
      </div>
    <!-- End Container -->
  </body>
</html>

